<template>
    <view class="page">
        <nav-bar bgColor="#F5f5f5">
            <view class="tab_box" v-if="module.selfMention">
                <view :class="{ active: type == 1000 }" @click="onTypeSelect(1000)">物流配送</view>
                <view :class="{ active: type == 2000 }" @click="onTypeSelect(2000)">上门自提</view>
            </view>
            <text v-else>确认订单</text>
        </nav-bar>
        <!-- 公共组件-每个页面必须引入 -->
        <public-module></public-module>
        <view class="address_info_box" v-if="type == 1000" @click="onPageJump('/pages/my/address/addressList?isSelect=1')">
            <view class="address_info">
                <view class="name" v-if="checkedAddressData.objId">
                    <text>{{ checkedAddressData.receiveName }}</text>
                    {{ checkedAddressData.phone }}
                </view>
                <text v-if="checkedAddressData.objId" class="info">{{ checkedAddressData.position }}{{ checkedAddressData.address }}</text>
                <view v-else="" class="name">请选择地址</view>
            </view>
        </view>
        <view class="extract_box" v-if="type == 2000">
            <view class="extract_address_info">
                <view @click="onOpenLocation">{{ goodsInfo.regionStr }}</view>
                <text @click="onCall(goodsInfo.shopPhone)"></text>
            </view>
            <map :longitude="goodsInfo.longitude" :latitude="goodsInfo.latitude" show-location="true" :markers="masterList"></map>
            <view class="input_form_box">
                <picker mode="date" :value="reserveDate" :start="startDate" :end="endDate" @change="onDateChange">
                    <view class="input_box">
                        <view class="name">自提日期</view>
                        <view class="select_info">
                            <text class="value" v-if="reserveDate">{{ reserveDate }}</text>
                            <text v-else="" class="select">请选择自提日期</text>
                        </view>
                    </view>
                </picker>
                <picker mode="time" :value="reserveTime" start="08:00" end="22:00" @change="onTimeChange">
                    <view class="input_box line">
                        <view class="name">自提时间</view>
                        <view class="select_info">
                            <text class="value" v-if="reserveTime">{{ reserveTime }}</text>
                            <text v-else="" class="select">请选择自提时间</text>
                        </view>
                    </view>
                </picker>
                <view class="input_box line">
                    <view class="name">提货人</view>
                    <view class="input_info"><input type="text" v-model="extractUserName" placeholder="请输入提货人姓名" /></view>
                </view>
                <view class="input_box line">
                    <view class="name">预留电话</view>
                    <view class="input_info"><input type="number" v-model="reservePhone" placeholder="请输入预留电话" /></view>
                </view>
            </view>
        </view>
        <view class="address_info_box" v-if="goodsInfo.isCrossBorder">
            <view class="address_info" @click="popupShow = true">
                <view class="name" v-if="idCardNo && idCardName">
                    <text>实名信息：{{ idCardName }}</text>
                </view>
                <text v-if="idCardNo && idCardName" class="info">身份证号码：{{ idCardNo }}</text>
                <view v-else="" class="name">请认证实名信息</view>
            </view>
        </view>
        <view class="shop_goods_box">
            <view class="shop_info" @click="onPageJump('/pages/home/shop/shop?objId=' + goodsInfo.shopId)">{{ goodsInfo.shopName }}</view>
            <!-- 商品信息 -->
            <view class="goods_item" v-for="(item, index) of goodsInfo.goods" :key="index">
                <image class="goods_img" :src="item.goodsImg"></image>
                <view class="info_box">
                    <view class="name">{{ item.goodsName }}</view>
                    <view class="specification">{{ item.goodsSpecName }}</view>
                    <view class="price_num_box">
                        <text class="price">{{ item.goodsPriceStr }}</text>
                        <view class="num_box" v-if="!preOrderData.cutNo">
                            <button :class="{ active: item.goodsNum > 1 }" @click="onNumLess(index)">-</button>
                            <text>{{ item.goodsNum }}</text>
                            <button :class="{ active: item.goodsNum < item.stock }" @click="onNumPlus(index)">+</button>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="order_price_box">
            <view class="order_cell_list">
                <view class="order_cell_left">商品总价</view>
                <view class="order_cell_right">￥{{ goodsInfo.priceTotal }}</view>
            </view>
            <view class="order_cell_list">
                <view class="order_cell_left">快递</view>
                <view class="order_cell_right">{{ goodsInfo.pricePostageStr }}</view>
            </view>
            <view v-if="module.coupon" class="order_cell_list line" @click="onPageJump('/pages/my/useCouponDetails?goodsPrice=' + goodsInfo.priceTotal)">
                <view class="order_cell_left">
                    <text class="volume">券</text>
                    优惠券
                </view>
                <view class="order_cell_right red arrow">{{ goodsInfo.discountVoucherPriceStr }}</view>
            </view>
            <view v-if="module.coupon" class="order_cell_list">
                <view class="order_cell_left">
                    <text class="benefit">惠</text>
                    满减优惠
                </view>
                <view class="order_cell_right red">{{ goodsInfo.fullStr }}</view>
            </view>
            <view class="order_cell_list" v-if="module.integral">
                <view class="order_cell_left">积分余额 {{ goodsInfo.userIntegral }}</view>
                <view class="order_cell_right">
                    <input type="number" v-model="integral" :placeholder="'本次最多可用' + goodsInfo.maxUseIntegral" @input="onIntegralChange"
                        @confirm="onIntegralChange" />
                </view>
            </view>
            <view class="order_cell_list" v-if="module.integral">
                <view class="order_cell_left">
                    <text class="benefit">抵</text>
                    积分抵扣
                </view>
                <view class="order_cell_right red">-￥{{ goodsInfo.integralPrice }}</view>
            </view>
            <view class="order_cell_list">
                <view v-if="module.coupon" class="order_cell_left gray size24">
                    已优惠：
                    <text class="red">￥{{ goodsInfo.discounTotalPrice }}</text>
                </view>
                <view v-else></view>
                <view class="order_cell_right size24">
                    实付：
                    <text class="red size28">￥{{ goodsInfo.pricePay }}</text>
                </view>
            </view>
            <view class="order_cell_list" v-if="recommendInfo">
                <view class="order_cell_left gray size24">
                    推荐人：
                    <text class="gray">{{recommendInfo.phone}}({{recommendInfo.nickName}})</text>
                </view>
            </view>
        </view>
		<!-- 省省吧幸福家的 -->
		<view v-if="goodsInfo.engineOilCombo" class="input_form_box">
		    <view class="input_box">
		    	<view class="name required">上传行驶证</view>
		    	<view class="id_card_box">
		    		<view @click="onUnloadImg()">
		    			<image v-if="driverLicense" :src="driverLicense" mode="aspectFill"></image>
		    			<image v-else="" src="../../static/icon/theme/ic_xingshizheng.png" mode="aspectFit"></image>
		    		</view>
		    	</view>
		    </view>
		</view>
        <view class="remark_box">
            <view class="remark_title">备注</view>
            <view class="textarea_box">
                <textarea maxlength="500" v-model="remark" placeholder="输入您的备注" />
                <view>{{ remark.length }}/500</view>
			</view>
		</view>
		<view class="but_box">
			<view class="total_price">￥{{ goodsInfo.pricePay }}</view>
			<button type="primary" @click="onSubmit">立即购买</button>
		</view>
		<z-popup v-model="popupShow">
			<view class="id_card_box">
				<view class="id_card_title">海关身份实名认证</view>
				<view class="close" @click="popupShow = false"></view>
				<view class="id_card_text">根据海关规定，购买人身份信息与支付软件实名信息一致，否则将导致包裹被卡关。比如微信支付实名为“小明”，此处实名信息也应为“小明”。</view>
				<view class="input_box"><input type="text" v-model="idCardName" placeholder="请输入支付人的姓名" /></view>
				<view class="input_box"><input type="text" v-model="idCardNo" placeholder="请输入支付人的身份证号" /></view>
				<view class="btn_box"><button @click="popupShow = false">确定</button></view>
				<view class="id_card_prompt">*商家负责提交信息，并对您的身份信息保密，绝不传播或用于其他地方，请放心填写。</view>
			</view>
		</z-popup>
	</view>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
import { setPayAssign } from '@/config/utils';
import zPopup from '@/components/common/popup.vue';
let clearTime;
export default {
	components: {
		zPopup
	},
	data() {
		return {
			//商品信息
			goodsInfo: {
				longitude: 0,
				latitude: 0,
                "priceTotal":0.0,
                "pricePay":0.0,
                "pricePostage":0.0,
                "pricePostageStr":"¥0.0",
                "fullDiscountPrice":0.0,
                "fullStr":"",
                "discountVoucherPrice":0.0,
                "discountVoucherPriceStr":"",
                "discounTotalPrice":0.0,
                "shopName":"",
                "shopPhone":"",
                "latitude":"",
                "longitude":"",
                "regionStr":"",
                "goods":[],
                "isCrossBorder":false,
                "integral":null,
                "userIntegral":0,
                "maxUseIntegral":0,
                "integralPrice":0.0,
                "orderRecommendUserBO":null
			},
			//备注
			remark: '',
			// 身份证信息
			idCardName: '',
			idCardNo: '',
			popupShow: false,
			type: 1000,
			//日期
			reserveDate: '',
			//自提时间
			reserveTime: '',
			//最小日期
			startDate: '',
			//最大日期
			endDate: '',
			//预留电话
			reservePhone: '',
			// 提货人姓名
			extractUserName: '',
			// 抵扣积分
			integral: '',
			masterList: [],
			module: {},
			recommendInfo:{},
			// 行驶证图片（省省吧幸福家）
			driverLicense: ""
		};
	},
	computed: {
		...mapState(['preOrderData', 'checkedAddressData', 'checkedCouponData', 'userInfo', 'chatScenesInfo'])
	},
	//第一次加载
	onLoad(e) {
		this.module = this.$base.module;
		this.getDate();
		this.pageData();
		this.setCheckedCouponData({});
		if (this.userInfo.phone) {
			this.reservePhone = this.userInfo.phone;
		}
	},
	//页面显示
	onShow() {
		if (this.goodsInfo.shopId) {
			this.getOrderInfo();
		} else {
			this.getOrderInfo(this.preOrderData);
		}
	},
	//方法
	methods: {
		...mapMutations(['setCheckedAddressData', 'setCheckedCouponData']),
		// 页面跳转
		onPageJump(url) {
			uni.navigateTo({
				url: url
			});
		},
		onUnloadImg(type) {
			this.$http.qnImgUpload({
				count: 1
			}).then(res => {
				this.driverLicense = res[0];
			});
		},
		//拨打电话
		onCall(phone) {
			if (phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				});
			}
		},
		//物流|自提选择
		onTypeSelect(val) {
			this.type = val;
			this.getOrderInfo();
		},
		// 积分变化
		onIntegralChange(e) {
			clearTime && clearTimeout(clearTime);
			clearTime = setTimeout(() => {
				if (e.detail.value <= this.goodsInfo.maxUseIntegral) {
					this.getOrderInfo();
				} else {
					let title = '没有可用积分';
					if (this.goodsInfo.maxUseIntegral > 0) {
						this.integral = this.goodsInfo.maxUseIntegral;
						title = '积分最多可用' + this.goodsInfo.maxUseIntegral;
					} else {
						this.integral = '';
					}
					uni.showToast({
						title: title,
						icon: 'none'
					});
				}
			}, 1000);
		},
		//页面数据
		pageData() {
			this.$http.get('api/mime/address/v1/get_default').then(res => {
				this.setCheckedAddressData(res || {});
			});
			this.$http.get('api/order/mall/v1/is_cross_border').then(res => {
				this.idCardName = res.idCardName || '';
				this.idCardNo = res.idCardNo || '';
			});
		},
		//获取最小，最大日期
		getDate() {
			const date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();
			let currentTime = date.getTime();
			month = month > 9 ? month : '0' + month;
			day = day > 9 ? day : '0' + day;
			this.startDate = `${year}-${month}-${day}`;
			const endDate = new Date(currentTime + 2592000000);
			let endYear = endDate.getFullYear();
			let endMonth = endDate.getMonth() + 1;
			let endDay = endDate.getDate();
			endMonth = endMonth > 9 ? endMonth : '0' + endMonth;
			endDay = endDay > 9 ? endDay : '0' + endDay;
			this.endDate = `${endYear}-${endMonth}-${endDay}`;
		},
		//日期选择
		onDateChange(e) {
			this.reserveDate = e.detail.value;
		},
		//时间选择
		onTimeChange(e) {
			this.reserveTime = e.detail.value;
		},
		// 地图导航
		onOpenLocation() {
			const goodsInfo = this.goodsInfo;
			if (goodsInfo.latitude && goodsInfo.longitude) {
				uni.openLocation({
					latitude: Number(goodsInfo.latitude),
					longitude: Number(goodsInfo.longitude),
					success: function() {
						console.log('success');
					}
				});
			}
		},
		//预下单数据
		getOrderInfo(data) {
			let httpData = {};
			if (data) {
				httpData = {
					...data
				};
			} else {
				httpData = this.getGoodsParameter();
			}
			httpData.logistics = this.type == 1000 ? true : false;
			httpData.goodsPackage = false;
			if (this.checkedAddressData.objId) {
				httpData.addressId = this.checkedAddressData.objId;
			}
			if (this.checkedCouponData.objId) {
				httpData.voucherId = this.checkedCouponData.objId;
			}
			if (this.integral) {
				httpData.integral = this.integral;
			}
			if (this.chatScenesInfo.recommend) {
				httpData.recommendUid = this.chatScenesInfo.recommend;
			} else if (this.chatScenesInfo.recommendCode) {
				httpData.recommendUid = this.chatScenesInfo.recommendCode;
			}
			let url = '';
			if (this.preOrderData.fightBuy) {
				url = 'api/order_mall_pt/v1/budget';
			} else if (this.preOrderData.cutNo){
				url = 'api/order_mall_cut/v1/budget';
                httpData.cutNo = this.preOrderData.cutNo;
			} else {
				url = 'api/order/mall/v1/budget';
			}
			this.$http.post(url, httpData).then(res => {
				this.goodsInfo = res;
				this.masterList = [
					{
						longitude: res.longitude,
						latitude: res.latitude,
						id: 1,
						iconPath: 'https://qn.kemean.cn/upload/201908/22/701ea93909a74134b0ea139f2de10e2a',
						width: 20,
						height: 24,
						callout: {
							content: res.regionStr,
							fontSize: 12,
							display: 'ALWAYS',
							borderRadius: 8,
							padding: 8
						}
					}
				];
				this.recommendInfo = res.orderRecommendUserBO;
			});
		},
		//获取商品id，数量
		getGoodsParameter() {
			let parameter = {
				goods: [],
				shopId: this.goodsInfo.shopId,
				goodsPackage: this.preOrderData.goodsPackage || false,
				shoppingCart: this.preOrderData.shoppingCart
			};
			this.goodsInfo.goods.forEach(item => {
				parameter.goods.push({
					goodsId: item.goodsId,
					goodsSpecId: item.goodsSpecId,
					goodsNum: item.goodsNum
				});
			});
			return parameter;
		},
		//商品数量减
		onNumLess(index) {
			let goodsNum = this.goodsInfo.goods[index].goodsNum;
			if (goodsNum > 1) {
				this.goodsInfo.goods[index].goodsNum -= 1;
				this.getOrderInfo();
			}
		},
		//商品数量加
		onNumPlus(index) {
			let goodsNum = this.goodsInfo.goods[index].goodsNum;
			let stock = this.goodsInfo.goods[index].stock;
			if (goodsNum < stock) {
				this.goodsInfo.goods[index].goodsNum += 1;
				this.getOrderInfo();
			}
		},
		//立即购买
		onSubmit() {
			let httpData = this.getGoodsParameter();
			if (this.goodsInfo.isCrossBorder) {
				if (this.idCardName == '' || this.idCardNo == '') {
					uni.showToast({
						title: '海购商品，请先认证身份信息',
						icon: 'none'
					});
					this.popupShow = true;
					return;
				}
				if (!/\d{17}[0-9A-Za-z]/.test(this.idCardNo)) {
					uni.showToast({
						title: '身份证号码格式不正确',
						icon: 'none'
					});
					return;
				}
				httpData.idCardName = this.idCardName;
				httpData.idCardNo = this.idCardNo;
			}
			if (this.type == 1000) {
				//物流配送
				httpData.logistics = true;
				if (!this.checkedAddressData.objId) {
					uni.showToast({
						title: '请选择收货地址',
						icon: 'none'
					});
					return;
				}
				httpData.addressId = this.checkedAddressData.objId;
			} else {
				//上门自提
				httpData.logistics = false;
				if (!this.reserveDate) {
					uni.showToast({
						title: '请选择提货日期',
						icon: 'none'
					});
					return;
				}
				if (!this.reserveTime) {
					uni.showToast({
						title: '请选择提货时间',
						icon: 'none'
					});
					return;
				}
				if (!this.extractUserName) {
					uni.showToast({
						title: '请输入提货人姓名',
						icon: 'none'
					});
					return;
				}
				if (!this.reservePhone) {
					uni.showToast({
						title: '请输入预留手机号',
						icon: 'none'
					});
					return;
				}
				httpData.reserveTime = this.reserveDate + ' ' + this.reserveTime;
				httpData.reservePhone = this.reservePhone;
				httpData.extractUserName = this.extractUserName;
			}
			// 行驶证图片（省省吧幸福家）
			if(this.goodsInfo.engineOilCombo){
				if (this.driverLicense) {
					httpData.driverLicense = this.driverLicense;
				} else {
					uni.showToast({
						title: '请上传行驶证',
						icon: 'none'
					});
					return;
				}
			}
			//优惠券
			if (this.checkedCouponData.objId) {
				httpData.voucherId = this.checkedCouponData.objId;
			}
			//备注
			if (this.remark) {
				httpData.remark = this.remark;
			}
			if (this.integral) {
				httpData.integral = this.integral;
			}
			
			//推荐码
			if (this.chatScenesInfo.recommend) {
				httpData.recommendUid = this.chatScenesInfo.recommend;
			} else if (this.chatScenesInfo.recommendCode) {
				httpData.recommendUid = this.chatScenesInfo.recommendCode;
			}
			let url = '';
			if (this.preOrderData.fightBuy) {
				url = 'api/order_mall_pt/v1/submit';
				httpData.orderMallPtId = this.preOrderData.orderMallPtId;
			}  else if (this.preOrderData.cutNo){
				url = 'api/order_mall_cut/v1/submit';
                httpData.cutNo = this.preOrderData.cutNo;
			} else {
				url = 'api/order/mall/v2/submit';
			}
			
			this.$http.post(url, httpData).then(res => {
				//支付
				setPayAssign(res);
			});
		}
	},
	//页面隐藏
	onHide() {},
	//页面卸载
	onUnload() {},
	//页面下来刷新
	onPullDownRefresh() {},
	//页面上拉触底
	onReachBottom() {},
	//用户点击分享
	onShareAppMessage(e) {
		return this.wxShare();
	}
};
</script>
<style lang="scss" scoped>
@import '@/style/mixin.scss';
.page {
	padding-bottom: 120rpx;
}
.tab_box {
	display: flex;
	justify-content: center;
	> view {
		border: 2rpx solid $themeColor;
		font-size: 28rpx;
		color: $themeColor;
		width: 200rpx;
		height: 60rpx;
		text-align: center;
		line-height: 56rpx;
		&:nth-child(1) {
			border-radius: 6rpx 0 0 6rpx;
		}
		&:nth-child(2) {
			border-radius: 0 6rpx 6rpx 0;
		}
		&.active {
			background-color: $themeColor;
			color: #ffffff;
		}
	}
}
.input_form_box {
	margin: 20rpx 30rpx 0 30rpx;
	.id_card_box {
		width: 100%;
		display: flex;
		justify-content: center;
		padding: 0 0 30rpx 0;
		>view {
			width: 300rpx;
			height: 195rpx;
	
			&:nth-child(2) {
				margin-left: 40rpx;
			}
	
			image {
				width: 100%;
				height: 100%;
			}
		}
	}
}
.id_card_box {
	background-color: #ffffff;
	padding: 40rpx 30rpx 50rpx 30rpx;
	position: relative;
	.id_card_title {
		font-size: 32rpx;
		color: #333333;
		text-align: center;
	}
	.close {
		position: absolute;
		right: 30rpx;
		top: 30rpx;
		@include bis('../../static/icon/login_ic_close.png');
		width: 30rpx;
		height: 30rpx;
	}
	.id_card_text {
		padding-top: 37rpx;
		padding-bottom: 20rpx;
		font-size: 24rpx;
		color: #333333;
	}
	.input_box {
		margin-top: 20rpx;
		height: 88rpx;
		background-color: #f7f7f7;
		border-radius: 8rpx;
		input {
			height: 88rpx;
			padding: 0 30rpx;
			font-size: 28rpx;
		}
	}
	.btn_box {
		padding-top: 40rpx;
		button {
			height: 88rpx;
			background-color: #85d764;
			border-radius: 8rpx;
			font-size: 32rpx;
			color: #ffffff;
			line-height: 88rpx;
		}
	}
	.id_card_prompt {
		padding-top: 27rpx;
		font-size: 24rpx;
		color: #ff3f3f;
	}
}

.address_info_box {
	margin: 20rpx 30rpx;
	background-color: #fff;
	border-radius: 6rpx;
	padding: 30rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	&::after {
		content: '';
		@include bis('../../static/icon/me_lise_more.png', 100% 100%);
		width: 12rpx;
		height: 22rpx;
	}
	.name {
		font-size: 28rpx;
		color: #333333;
		text {
			font-size: 32rpx;
			color: #333333;
		}
	}
	.info {
		font-size: 24rpx;
		color: #999999;
	}
}
.shop_goods_box {
	background-color: #ffffff;
	border-radius: 8rpx;
	margin: 20rpx 30rpx 0rpx 30rpx;
	padding-bottom: 10rpx;
	.shop_info {
		padding: 34rpx 30rpx 10rpx 30rpx;
		display: flex;
		align-items: center;
		font-size: 28rpx;
		color: #333333;
		font-weight: bold;
		&:after {
			content: '';
			@include bis('../../static/icon/icon_enter.png');
			width: 14rpx;
			height: 24rpx;
			margin-left: 20rpx;
		}
	}
	.goods_item {
		padding: 20rpx 30rpx 20rpx 30rpx;
		display: flex;
		.goods_img {
			width: 160rpx;
			height: 160rpx;
			flex-shrink: 0;
		}

		.info_box {
			width: calc(100% - 160rpx);
			padding-left: 30rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.name {
				font-size: 28rpx;
				color: #333333;
				font-weight: bold;
			}

			.specification {
				font-size: 24rpx;
				color: #999999;
			}
			.price_num_box {
				display: flex;
				justify-content: space-between;
				align-items: center;
				.price {
					font-size: 28rpx;
					color: #333333;
				}
				.num_box {
					display: flex;

					button {
						width: 50rpx;
						height: 50rpx;
						background-color: #f7f7f7;
						line-height: 50rpx;
						color: #cccccc;

						&:first-child {
							border-radius: 8rpx 0rpx 0rpx 8rpx;
						}

						&:last-child {
							border-radius: 0rpx 8rpx 8rpx 0rpx;
						}

						&.active {
							background-color: #e5e5e5;
							color: #999999;
						}
					}

					text {
						width: 50rpx;
						height: 50rpx;
						background-color: #e5e5e5;
						text-align: center;
						line-height: 50rpx;
						margin: 0 4rpx;
						font-size: 30rpx;
						color: #333;
					}
				}
			}
		}
	}
}

.order_price_box {
	background-color: #ffffff;
	border-radius: 8rpx;
	margin: 20rpx 30rpx 0rpx 30rpx;
	padding: 0 30rpx 30rpx 30rpx;
	.order_cell_list {
		padding-top: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 28rpx;
		color: #333333;
		.order_cell_left {
			display: flex;
			align-items: center;
		}
		.order_cell_right {
			display: flex;
			align-items: center;
			input {
				text-align: right;
			}
		}
		&.line {
			margin-top: 30rpx;
			border-top: 1rpx solid #efefef;
		}
		.volume {
			width: 30rpx;
			height: 30rpx;
			background-color: #ea552d;
			border-radius: 4rpx;
			font-size: 20rpx;
			color: #ffffff;
			text-align: center;
			line-height: 30rpx;
			margin-right: 10rpx;
		}
		.benefit {
			width: 30rpx;
			height: 30rpx;
			background-color: #f19837;
			border-radius: 4rpx;
			font-size: 20rpx;
			color: #ffffff;
			text-align: center;
			line-height: 30rpx;
			margin-right: 10rpx;
		}
		.red {
			color: #ff5527;
		}
		.gray {
			color: #999999;
		}
		.size24 {
			font-size: 24rpx;
		}
		.size28 {
			font-size: 28rpx;
		}
		.arrow::after {
			content: '';
			@include bis('../../static/icon/me_lise_more.png', 100% 100%);
			width: 12rpx;
			height: 22rpx;
			margin-left: 20rpx;
		}
	}
}

.remark_box {
	background-color: #ffffff;
	border-radius: 8rpx;
	margin: 20rpx 30rpx 0rpx 30rpx;
	padding: 30rpx;
	.remark_title {
		font-size: 28rpx;
		color: #333333;
	}
	.textarea_box {
		margin-top: 30rpx;
		textarea {
			color: #999999;
			font-size: 24rpx;
			width: 100%;
			height: 150rpx;
		}
		view {
			text-align: right;
			font-size: 24rpx;
			color: #999999;
		}
	}
}
.but_box {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	background-color: #fff;
	border-top: 1rpx solid #efefef;
	display: flex;
	justify-content: space-between;
	align-items: center;
	z-index: 10;
	view {
		padding-left: 30rpx;
		font-size: 36rpx;
		color: #ff5527;
	}
	button {
		width: 280rpx;
		height: 98rpx;
		line-height: 98rpx;
		border-radius: 0;
		background-color: $themeColor;
		font-size: 32rpx;
		color: #ffffff;
	}
}
//上门自提
.extract_box {
	padding: 30rpx 0rpx 0 0rpx;
	border-bottom: 12rpx solid #f4f4f4;
	.extract_address_info {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 15rpx 30rpx;
		background-color: #ffffff;
		view {
			font-size: 24rpx;
			color: #333333;
			display: flex;
			align-items: center;
			&::before {
				content: '';
				background-image: url('../../static/icon/orderdetails_ads.png');
				background-position: center center;
				background-repeat: no-repeat;
				background-size: cover;
				width: 20rpx;
				height: 26rpx;
				margin-right: 30rpx;
				flex-shrink: 0;
			}
		}
		text {
			@include bis('../../static/icon/orderdetails_phone.png', 100% 100%);
			width: 30rpx;
			height: 30rpx;
			flex-shrink: 0;
			margin-left: 30rpx;
		}
	}
	map,
	.map {
		width: 100vw;
		height: 300rpx;
	}

	.extract_address_content {
		position: absolute;
		top: 20rpx;
		height: 100rpx;
		left: 90rpx;
		right: 116rpx;
		font-size: 26rpx;
		color: #333333;
		white-space: pre-wrap;
	}
	.input_form_box {
		margin: 30rpx 30rpx 0 30rpx;
		border-radius: 6rpx;
		.input_box {
			padding: 0 30rpx;

			&.line {
				border-top: 1rpx solid #efefef;
			}
		}
	}
}
.tab_content_box {
	padding-top: 15rpx;
}
</style>
